<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>加人计划管理</title>
    <link rel="stylesheet" href="../assets/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../assets/style/admin.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <script src="../assets/layui/layui.js"></script>
    <script src="../assets/js/common.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="../common/header.js"></script>
    <!-- 内容主体区域 -->
    <div id="LAY_app_body">
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            加人计划管理
                        </div>
                        <div class="layui-card-body">
                            <div class="layui-row">
                                <select id="status" style="position: relative;float: right;" onchange="reloadList()">
                                    <option value="1">启用的</option>
                                    <option value="0">禁用的</option>
                                    <option value="-1">全部</option>
                                </select>&nbsp;&nbsp;
                                <a href="add.html" class="layui-btn layui-btn-sm layui-btn-radius"><i
                                        class="layui-icon layui-icon-add-1"></i>创建计划</a>&nbsp;&nbsp;
                                <button class="layui-btn layui-btn-sm layui-btn-danger"
                                        onclick="cancelPrepareAddFriend()">撤销已上传通讯录等待加人的手机号
                                </button>
                            </div>
                            <table id="LAY-plan-manage" lay-filter="LAY-plan-manage"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        var reloadList;
        var cancelPrepareAddFriend;
        layui.use('table', function () {
            var $ = layui.$
                , table = layui.table
                , form = layui.form;

            var status = $('#status').find("option:selected").val();
            table.render({
                elem: '#LAY-plan-manage'
//            ,height: 315
                , url: '/add_friend_plan/list_data' //数据接口
                , where: {//设定异步数据接口的额外参数
                    status: status
                }
                , page: true //开启分页
                , cols: [[ //表头
//                {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                    {field: 'name', title: '名称', width: 150, fixed: 'left', sort: true}
                    , {field: 'wechat_group', title: '微信组', width: 200}
                    , {field: 'start_hour', title: '执行时段', width: 160, templet: '#startHourTpl'}
                    , {field: 'overview', title: '概览', templet: '#overviewTpl'}
                    , {field: 'created', title: '添加时间', width: 170, sort: true}
                    , {
                        field: 'process_status',
                        title: '执行状态',
                        sort: true,
                        width: 110,
                        templet: '#processStatusTpl',
                        unresize: true
                    }
                    , {fixed: 'right', width: 120, align: 'center', toolbar: '#barDemo'}
                ]]
                , title: '计划列表'
                , toolbar: '#toolbarDemo'
                , defaultToolbar: ['filter']
            });

            //监听工具条
            table.on('tool(LAY-plan-manage)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象

                if (layEvent === 'detail') { //查看
                    //do somehing
                } else if (layEvent === 'del') { //删除

                } else if (layEvent === 'edit') { //编辑
                    //do something
                }
            });

            //监听状态操作
            form.on('switch(processStatusDemo)', function (obj) {
                var process_status = 2;
                if (obj.elem.checked) {
                    process_status = 1;
                }
                var id = this.step;
                var post = {
                    id: id,
                    process_status: process_status
                };
                $.ajax({
                    type: "POST",
                    url: "/add_friend_plan/changeProcessStatus",
                    data: post,
                    success: function (response) {
                        var dataObj = $.parseJSON(response);
                        if (dataObj.code == 0) {
                            layer.tips('修改成功', obj.othis);
                        } else if (dataObj.code == -1) {
                            layer.tips(dataObj.msg, obj.othis);
                        } else {
                            layer.msg(dataObj.msg, {icon: 5});
                        }

                        setTimeout(function () {
                            reloadList();
                        }, 1000);
                    },
                    error: function (request, status, error) {

                    }
                });
                return false;
            });

            reloadList = function () {
                var status = $('#status').find("option:selected").val();
                table.reload('LAY-plan-manage', {
                    where: { //设定异步数据接口的额外参数，任意设
                        status: status
                    }
                    , page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            };

            cancelPrepareAddFriend = function (planId) {
                layer.confirm('撤销后无法恢复，确定撤销吗？', function (index) {
                    var post = {
                        cancel: 1,
                        plan_id: planId
                    };
                    $.ajax({
                        type: "POST",
                        url: "/add_friend_plan/cancelPrepareAddFriend",
                        data: post,
                        success: function (response) {
                            var dataObj = $.parseJSON(response);
                            if (dataObj.code == 0) {
                                layer.msg(dataObj.msg, {icon: 6});
                            } else {
                                layer.msg(dataObj.msg, {icon: 5});
                            }
                        },
                        error: function (request, status, error) {

                        }
                    });
                    layer.close(index);
                });
                return false;
            };
        });

    </script>
    <script type="text/html" id="overviewTpl">
        共<span style="color: purple;">{{d.overview.total}}</span>，待加<span
                style="color: blue;">{{d.overview.waitingAdd}}</span>，已加<span style="color: orange;">{{d.overview.requested+d.overview.agreed}}</span>(通过
        <span style="color: green;">{{d.overview.agreed}}</span>，待通过{{d.overview.requested}})，无效<span
                style="color: gray;">{{d.overview.notWx}}</span>，失败<span
                style="color: red;">{{d.overview.failed}}</span>
    </script>
    <script type="text/html" id="barDemo">
        {{# if(d.process_status!=1 || d.status==0){ }}
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit" href="/add_friend_plan/edit/{{d.id}}"
           target="_self"><i class="layui-icon layui-icon-edit"></i>编辑</a>
        {{# }else if(d.process_status==1){ }}
        请暂停再编辑
        {{# } }}
    </script>
    <script type="text/html" id="processStatusTpl">
        {{# if(d.status==1){ }}
        {{# if(d.process_status==1 || d.process_status==2){ }}
        <input type="checkbox" name="process_status" step="{{d.id}}" value="{{d.process_status}}" lay-skin="switch"
               lay-text="执行中|暂停" lay-filter="processStatusDemo" {{ d.process_status== 1 ? 'checked' : '' }}>
        {{# }else if(d.process_status==3){ }}
        <span style="color: #00CC00;">执行完毕</span>
        {{# }else if(d.process_status==4){ }}
        <span style="color: #CC0000;">系统停止</span>
        {{# } }}
        {{# }else if(d.status==0){ }}
        <span style="color: #CC0000;">禁用</span>
        {{# } }}
    </script>
    <script type="text/html" id="startHourTpl">
        {{d.start_hour > 9 ? d.start_hour : '0'+d.start_hour}}:00:00 ~ {{d.end_hour > 9 ? d.end_hour : '0'+d.end_hour}}:59:59
    </script>
</div>
</body>
</html>
